import '../css/my.css'
import { useState, useEffect } from 'react';
import instance from '../axios/index'
import { useNavigate, useLocation } from 'react-router-dom';
import { message, Input } from 'antd';


function Orders() {
    const navigate = useNavigate();
    const location = useLocation();



    const [dingdan, setDingdan] = useState(location.state ? location.state.strg : '全部');
    const [dataList, setDataList] = useState([]);
    const getDataList = async () => {
        const { data: { code, data } } = await instance({ url: `/my/getDataList?name=${inputValue}`})
        if (code === 200) {
            setDataList(data)
        }
    }
    useEffect(() => {
        getDataList();
    }, [])

    const filterDataList = () => {
        let data = [...dataList]
        if (dingdan === '全部') {
            data = data
        } else if (dingdan === '待付款') {
            data = data.filter(item => item.status === 0)
        } else if (dingdan === '待提货') {
            data = data.filter(item => item.status === 1)
        } else {
            data = data.filter(item => item.status === 2)
        }
        return data
    }

    const shezhiStatus = async (val) => {
        if (val.status == 0) {
            const arr = [val._id]
            navigate(`/cart-orders/?ids=${arr.join(',')}`)  
        } else if (val.status == 1) {
            val.status = 2
            const { data: { code, msg } } = await instance({ url: '/my/updateStatus', method: 'post', data: val })
            if (code === 200) {
                message.success(msg)
                getDataList()
            }
        } else {
            navigate('/cart')
        }
    }
    const { Search } = Input;
    const [inputValue, setInputValue] = useState('');
    const onSearch = (value) => {
        setInputValue(value)
    }
    useEffect(() => {
        getDataList()
    }, [inputValue])

    return (<div style={{ backgroundColor: '#EFEFEF', height: '100vh' }}>
        <div className='backColor' style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <div onClick={() => navigate('/my')}>
                <img src='/iconfont/my/左.png' alt="search" style={{ width: '20px', height: '20px' }} />
            </div>
            <div>
                <h2>订单管理</h2>
            </div>
            <div>
                ···
            </div>
        </div>
        <div className='backColor' style={{ height: '80px',paddingTop: '10px' }}>
            <div style={{ width: '100%', height: '30px' }}>
                <Search
                    placeholder="请输入商品名称"
                    onSearch={onSearch}
                    style={{
                        width: '80%',
                        marginLeft:'10%',
                        borderRadius: '20px',
                    }}
                />
            </div>
            <div style={{ width: '80%', marginLeft: '10%' }}>
                <ul style={{ height: '40px', listStyle: 'none', padding: '0', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                    <li onClick={() => setDingdan('全部')} className={dingdan === '全部' ? 'bottonRed' : ''}>全部</li>
                    <li onClick={() => setDingdan('待付款')} className={dingdan === '待付款' ? 'bottonRed' : ''}>待付款</li>
                    <li onClick={() => setDingdan('待提货')} className={dingdan === '待提货' ? 'bottonRed' : ''}>待提货</li>
                    <li onClick={() => setDingdan('已提货')} className={dingdan === '已提货' ? 'bottonRed' : ''}>已提货</li>
                </ul>
            </div>
        </div>
        {filterDataList().map((item, index) => (<div style={{ borderRadius: '10px', width: '90%', marginLeft: '5%', padding: '5px', marginTop: '10px' }} className='backColor'>
            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                <div>
                    <p>{item.time}</p>
                </div>
                <div>
                    <p>{item.status == 0 ? '待付款' : item.status == 1 ? '待提货' : '已提货'} | s</p>
                </div>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                <div style={{ flex: 1 }}>
                    <img src={item.img} width={100} />
                </div>
                <div style={{ flex: 3, lineHeight: '20px' }}>
                    <h3>{item.name}</h3>
                    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                        <p>{item.time}</p>
                        <p>X {item.num}</p>
                    </div>
                    <div style={{ height: '20px' }}>
                        <p style={{ float: 'right' }}>共{item.num}件 应付金额： ¥ {(item.num * item.price)}</p>
                    </div>
                    <p style={{ float: 'right' }}><button onClick={() => shezhiStatus(item)} style={{ border: '1px solid red', color: 'red', width: '70px', height: '30px', marginTop: '10px', borderRadius: '20px', backgroundColor: 'white' }}>{item.status == 0 ? '立即付款' : item.status == 1 ? '确认收货' : '再次购买'}</button></p>
                </div>
            </div>
        </div>))}
    </div>)
}

export default Orders;